<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <el-breadcrumb-item v-bind:class="{ defaultStyle: navbarLayoutType }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-bind:class="{ defaultStyle: navbarLayoutType }"
      v-for="menu in menuItem"
      :key="menu.menuId"
    >
      {{ menu.name}}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  import { findIndexArray } from '@/utils'
  export default {
    name: 'index',
    data () {
      return {
        menuItem: null
      }
    },
    computed: {
      menuList: {
        get () {
          return this.$store.state.common.menuList
        },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
      navbarLayoutType: {
        get () {
          let type = this.$store.state.theme.navbarLayoutType.default
          return !type
        }
      }
    },
    watch: {
      $route: ['routeHandle']
    },
    methods: {
      /**
       * 监听路由变化，获取当前页面的路径
       */
      routeHandle () {
        let list = this.menuList
        let id = this.$route.meta.menuId
        // console.log(findIndexArray(list, id, []))
        let itempItem = findIndexArray(list, id, [])
        if (itempItem && itempItem.length > 0) {
          itempItem.forEach((element, index, arr) => {
            element.path = element.url ? element.url.replace(/\//g, '-') : ''
          })
        }
        this.menuItem = itempItem
      }
    }
  }
</script>

<style>
  .app-breadcrumb{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 30px;
  }
  .app-breadcrumb > .el-breadcrumb__item {
    cursor: pointer;
  }
  .defaultStyle .el-breadcrumb__inner{
    color: #FFF!important;
  }
</style>
